1 Introduction

Hi, welcome to this fifth lesson, on advanced dashboards.

In the previous lessons, you got familiar with the EpigraphHub platform, explored your first datasets and created your first charts and dashboard.

In this lesson, you will go further into dashboard creation, by building a new dashboard that is more dynamic, and made of more professional looking and contextualised charts.

2 Learning Objectives

By the end of this lesson,

3 Time-series smooth-line chart

3.1 Daily COVID cases by canton in Switzerland

As you are now used to creating charts, let’s add a Chart using the:

  • foph_cases_d dataset, and
  • Time-series Smooth Line chart type
    • Time-series Smooth-Line is a variation of line chart. Without angles and hard edges, Smooth-line looks smarter and more professional.

3.1.1 Query

In the Query section of the Data panel, we notice that the METRICS field cannot be empty

As we are interested by the daily COVID cases by Canton, we will:

  • set METRICS to Sum(entries)
  • GROUP data BY georegion
  • Filter data to keep only those related to canton. So, we will set FILTERS to geoRegion NOT IN ('CH', 'CHFL')

3.1.2 Time

To smooth the lines, we will set the TIME GRAIN to Week (for now :)

We will see later in this lesson that we will be able to dynamically change this option in our dashboard

3.1.3 Legend and Data Zoom

In the CUSTOMIZE tab and Chart Options section, tick the boxes:

  • SHOW LEGEND
  • DATA ZOOM
  • RICH TOOLTIP
  • TOOLTIP SORT BY METRIC

Let’s also give a title to our chart: Daily COVID cases by Canton in Switzerland, save it and add it to a new dashboard, named COVID in Switzerland (Tutorial)

3.2 Annotations

Annotations allow us to add additional context to our chart.

We will add an annotation to our Time-Series Smooth Line Chart.

Specifically, suppose we want to add for example the dates when:

  • the first partial lockdown was implemented, including closing schools and shops, limiting events and meetings, etc. from March 16th to June 8th, 2020, and when
  • all measures were lifted, on April 1st 2022

3.2.1 Create annotations

First, create an annotation layer by navigating to Settings > Manage > Annotation Layers in the top right corner of the page.

You will land on the Annotation layers page. There, create a new annotation layer by clicking on the + ANNOTATION LAYER button in the top right corner of the page.

In the pop-up window that opens, enter the name Partial lockdown in the ANNOTATION LAYER NAME field and click ADD. We can use this layer to refer to a number of different annotations.

In your new annotation layer, create an annotation by clicking on the +ANNOTATION button.

In the pop-up window that opens, add an ANNOTATION NAME (First Lockdown), and add the start and end dates (2020-03-16 -> 2020-06-08) before finally clicking ADD.

  1. In the same Annotation Layer Partial lockdown, create a second annotation, named Second Lockdown, which corresponds to the second partial lockdown that spanned from January 18th 2021, to May 31st 2021.

  2. The same way as we did for the first annotation layer (Partial lockdown), create a second annotation layer, named Measures. In this annotation layer, create three annotations, corresponding to different events, e.g., when:

  • Wearing masks became mandatory in public transportation (July 16th, 2020)
  • Vaccination campaign started (December 20th, 2020)
  • All measures were lifted (April 1st, 2022)

Your Annotation Layers should then look like the following:

3.2.2 Add annotations to chart

Once all our annotations are created, we will navigate to our Time-Series Smooth Line chart by:

  1. going to the Charts Page, then
  2. selecting Daily COVID cases by Canton in Switzerland from the list.

Next, in the Data panel, go to the Annotations and Layers section and select + Add annotation layer.

Within this dialogue:

  • NAME the layer as: Partial Lockdown
  • Change the ANNOTATION LAYER TYPE to: Interval
  • Set the ANNOTATION SOURCE as: Superset annotation
  • Specify the ANNOTATION LAYER as: Partial Lockdown

To change how your annotation look (ex. color and opacity), change the settings in the Display configuration section. Then, select OK, RUN QUERY to see the result and finally click on +Save to save your chart.

Add as well the annotations of the annotation layer named Measures

  • Set the ANNOTATION LAYER TYPE to: Event, which is similar to Interval but for one date
  • Change its Display configuration, such that the line STYLE is Dashed, and the COLOR is red

The result should look like the following:

Note that if you hover over the annotations on the chart, their name and description will appear.

Daily new COVID-19 hospitalisations by canton

  • Create a new Time-Series Smooth Line Chart, the same way you have just done it in section 3,
  • Use the foph_hosp_d dataset to get the daily new COVID-19 hospitatlisations (use entries column),
  • Name the chart Daily new COVID-19 hospitalisations by canton, and
  • Save it to your dashboard COVID in Switzerland (Tutorial)

Daily COVID-19 patients in ICU by canton

  • Create a new Time-Series Smooth Line Chart
  • Use the foph_hospcapacity dataset to get the daily new COVID-19 hospitatlisations (use ICU_COVID19Patients column),
  • Name it Daily COVID-19 patients in ICU by canton
  • Save it to your dashboard COVID in Switzerland (Tutorial)

Map of cumulative COVID-19 hospitalisations by canton

  • Create a Country Map of Switzerland
  • Use the foph_hosp_d dataset, as done in lesson 2, but with Time Range = no filter
  • Save it to your dashboard COVID in Switzerland (Tutorial)

4 Dynamic Canton Filtering

4.1 Create Filter Box chart

In this section, you will learn how to add a filter to your dashboard. Specifically, we will create a filter that allows us to look at the evolution of the COVID cases, hospitalisations, and patients in ICU from a particular canton or subset of cantons.

A filter box visualization can be created as any other visualization by :

  1. selecting + ‣ Chart, and then
  2. foph_cases_d as the datasource and
  3. Filter box as the visualization type.

4.2 Filter configuration

Next, in Filters Configuration first add a new filter by :

  1. selecting the plus (+) sign, then
  2. editing the newly created filter by selecting the pencil icon, and
  3. configuring it as follows:

This will allow us to:

  • select specific cantons based on georegion column,
  • select the canton of Geneva (GE) by default
    • Note that if the Default field is left empty, no filter will be applied, and data from all cantons will be displayed.
  • choose to present a list of cantons in alphabetical order, and
  • potentially select multiple cantons

We will now tick a few extra boxes as follows:

This will allow us to:

  • filter our data by date
  • change the Time Grain, and
  • apply instantly our selection (with no need to click on an extra-button).

Finally,

  • select Save,
  • name the chart as Canton Selector,
  • add the chart to our existing COVID in Switzerland (Tutorial) dashboard, and
  • Save & go to dashboard.

Once on the Dashboard, try using the filter to show only COVID cases, hospitatlisations and patients in ICU from both cantons of Geneva (GE), and Vaud (VD).

You will see the filter is applied to all of the other visualizations on the dashboard.

5 Dashboard

5.1 Markup

In this section, we will add some text to our dashboard. If you’re not there already:

  1. navigate to the dashboard by selecting Dashboards on the top menu, then
  2. navigate to COVID in Switzerland (Tutorial) from the list of dashboards, and
  3. get into edit mode by selecting Edit dashboard(pencil icon).

From the COMPONENTS pane, drag and drop a Row at the top of your dashboard. This will create an Empty Row.

Then drag and drop a Markdown box on that empty row. Look for the blue lines which indicate the anchor where the box will go.

Now, to edit the text, select the box, and enter the following text, in markdown format (see this Markdown Cheatsheet for more information about this format):

To check how it will eventually be displayed in the dashboard, toggle between Edit and Preview using the menu on the top of the box:

5.2 Dashboard organization

From the COMPONENTS pane, drag and drop a Row under the Description box.

As you now know, this will create a new Empty Row.

Then move the Canton Selector panel to that empty row. Look for the blue lines which indicate the anchor where the panel will go.

5.3 Adding charts from dashboard page

For now, we have always added charts to a dashboard, at the moment of saving the chart. In this section, we will see how we can add charts to the dashboard, directly from the Dashboard Page.

When on Edit mode, all your charts are accessible in the CHARTS tab on the right.

To complete the re-creation of our dashboard, we can drag and drop the country map chart, named Cumulative COVID Hospitalisation, from the Charts tab to the right of the filter box, and finally resize it. You should then get the final result of this dashboard:

Congratulations! You reached the end of this fifth lesson, where you have created a more dynamic and professional looking dashboard.

Hopefully, you are now comfortable with the creation of time-series smooth line charts and annotations, as well as adding dynamic filters and a markdown description box to your dashboard.

While we have now worked with public datasets, which are already available in the epigraphub database, in the next lesson, you will learn how to load your own datasets to the platform. See you there :)

Contributors

The following team members contributed to this lesson:

This work is licensed under the Creative Commons Attribution Share Alike license. Creative Commons License